<template>
	<view>
		<view class="view-header flex-cc">
			<view class="w-view flex-cc">
				<view class="z-view flex-cc">
					<view class="n-view flex-ccc border">
						<view class="jifen">
							1230
						</view>
						<view class="border-b"></view>
						<view class="jf-text">
							我的积分
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bar flex-ca">
			<view class="uni-icon uni-icon-compose border-r flex-cc" @click="navTo('integralDetail?type=1')">
				积分明细
			</view>
			<view class="uni-icon uni-icon-compose flex-cc" @click="navTo('integralDetail?type=2')">
				兑换记录
			</view>
		</view>
		
		<view class="flex-cc pad30">
			商品兑换
		</view>
		
		
		<list-goods :listGoods="listGoods"></list-goods>
		
	</view>
</template>

<script>
	import listGoods from '@/myComponents/list-goods/list-goods.vue';
	export default {
		components: {
		    listGoods
		},
		data() {
			return {
				listGoods:[
					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
					{goodImg:"../../static/temp/cate21.jpg",goodTitle:"ZL933袜子（男女款）5双/袋颜色随机3天发货",goodPoints:"200",},
				]
			}
		},
		methods: {
			navTo(url){
				uni.navigateTo({
					url
				});
			}
		}
	}
</script>

<style>
	.view-header{
		height:306upx;
		background:linear-gradient(180deg,rgba(42,144,252,1) 0%,rgba(82,192,253,1) 100%);
	}
	.w-view{
		width: 206upx;
		height: 206upx;
		border-radius: 50%;
		overflow: hidden;
		background:rgba(82,192,253,1);
	}
	.z-view{
		width: 182upx;
		height: 182upx;
		border-radius: 50%;
		overflow: hidden;
		background:rgba(255,255,255,1);
	}
	.n-view{
		width: 158upx;
		height: 158upx;
		border-radius: 50%;
		overflow: hidden;
		background:rgba(255,255,255,1);
	}
	.border{
		border: rgba(82,192,253,1) 1upx solid;;
	}
	.border-b{
		border-bottom: rgba(82,192,253,1) 1upx solid;
		width: 100%;
		height: 2upx;
	}
	.jifen{
		font-size:48upx;
		font-weight:500;
		color:rgba(65,172,252,1);
		line-height:66upx;
	}
	.jf-text{
		font-size:26upx;
		font-weight:500;
		color:rgba(65,172,252,1);
		line-height:36upx;
	}
	.bar{
		font-weight:500;
		padding: 18upx;
		background-color: #FFFFFF;
	}
	.bar>view{
		width: 50%;
		font-size:30upx;
		color:rgba(60,60,60,1);
		line-height:42upx;
	}
	
</style>
